<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>消息</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="/css/style.css" rel="stylesheet" type="text/css"/>
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/js/js/tab.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

    <script src="/js/common.js"></script>
    <style>
        #unread .unreadHref {
            color: #0000FF;
            text-decoration: underline;
        }

        .spanlocation {
            float: right;
            color: #fff;
            background-color: #dc3545;
            padding-right: .6em;
            padding-left: .6em;
            border-radius: 10rem;
            display: inline-block;
            padding: .25em .4em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
        }
    </style>
    <script>
        $(function () {
            //获取当前登录用户的(session)信息
            var user = JSON.parse(sessionStorage.getItem("user"));

            //要查信息状态
            var state = 0;
            //未读
            $('#unreadMessage').click(function () {
                //清空内容
                travelArr = [];
                pages = 0;
                state = 0;
                currentInput.val(1);
                query()
            })
            //已读
            $('#readMessage').click(function () {
                //清空内容
                travelArr = [];
                pages = 0;
                state = 1;
                currentInput.val(1);
                query()
            })
            //当前页的input框
            var currentInput = $('#currentPage');
            //用于存储游记的数组容器
            var travelArr = [];
            //总页数
            var pages;

            //获取我的游记数据
            function query() {
                //获取当前页的值
                var currentPage = currentInput.val();
                $.get('/users/' + user.id + '/systemMessages', {
                    state: state,
                    currentPage: currentPage
                }, function (data) {
                    //合并两个数组
                    $.merge(travelArr, data.list);
                    var json = {list: travelArr}//将数组封装成一个json对象,属性名为loop渲染指定的list
                    if (state == 1) {
                        //已读内容渲染
                        $('#read').renderValues(json);
                    } else {
                        //未读内容渲染
                        $('#unread').renderValues(json);
                    }
                    //绑定详情按钮
                    $('.unreadHref').click(function (event) {
                        //拿到系统信息id
                        var id = $(this).closest('.aui-layNews-text').data('smid')
                        console.log(id);
                        //读取的信息 后 改变 其状态
                        var href = $(this).attr('href');
                        //如果是点击查看详情   否则是蓝色标题
                        if (!href) {
                            //获取跳转的链接
                            href = $(this).closest('.aui-layNews-text').find('a.unreadHref').get(0)
                        } else {
                            href = $(this).get(0)
                        }
                        $.ajax({
                            url: '/systemessages',
                            data: "id=" + id + "&state=1&",
                            type: 'put',
                            success: function () {
                                //跳转
                                href.click();
                            }
                        });


                    })
                    //从pageInfo中获取总页数,并设置
                    pages = data.pages;
                }, 'json');

                //当前页input框+1维护,不能用函数内的变量
                currentInput.val(parseInt(currentPage) + 1);//字符串记得转成数字
            }

            //当页面滚动条变化时,执行的函数
            $(window).scroll(function () {
                console.log(pages);
                console.log(currentInput.val());
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    //获取当前页
                    var currentPage = currentInput.val();
                    //判断是否大于最后一页
                    if (currentPage <= pages) {
                        console.log(currentPage);
                        console.log(pages);
                        query();
                    } else {//最后一页,提示
                        $(document).dialog({
                            type: 'notice',
                            infoText: '到底',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
            //默认查一次
            query();
        })
    </script>
</head>
<body>


<section class="aui-flexView">

    <header class="aui-navBar aui-navBar-fixed b-line   ">
        <a href="javascript:history.go(-1);" class="aui-navBar-item">
            <i class="icon icon-return"></i>&nbsp;&nbsp;
        </a>
        <div class="aui-center">
            <span class="aui-center-title"></span>
        </div>
        <a href="javascript:;" class="aui-navBar-item">
            <i class="icon icon-sys"></i>
        </a>
    </header>
    <section class="aui-scrollView">
        <div class="aui-tab" data-ydui-tab>
            <ul class="tab-nav">
                <li class="tab-nav-item tab-active" id="unreadMessage">
                    <a href="javascript:;">未读信息</a>
                </li>
                <li class="tab-nav-item " id="readMessage">
                    <a href="javascript:;">已读信息</a>
                </li>
            </ul>
            <div class="tab-panel">
                <div class="tab-panel-item tab-active" id="unread">
                    <div class="tab-item" render-loop="list">
                        <a href="javascript:;" render-attr="data-id=list.id">
                            <div class="aui-layNews-time" render-html="list.createTime"></div>
                            <div class="aui-layNews-text" render-attr="data-smid=list.id">
                                <div class="aui-layNews-info b-line">
                                    <h2>系统消息 <span class="badge badge-danger badge-pill spanlocation">新通知</span></h2>
                                    <p>你有一条最新通知！</p>
                                    <p render-html="list.content"></p>
                                </div>
                                <div class="aui-flex">
                                    <div class="aui-flex-box unreadHref">查看详情</div>
                                    <div class="aui-layNews-arrow"></div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <input type="hidden" name="currentPage" id="currentPage" value="1"/>
                <div class="tab-panel-item " id="read">
                    <div class="tab-item" render-loop="list">
                        <a href="javascript:;" render-attr="data-id=list.id">
                            <div class="aui-layNews-time" render-html="list.createTime"></div>
                            <div class="aui-layNews-text" render-attr="data-smid=list.id">
                                <div class="aui-layNews-info b-line">
                                    <h2>系统消息</h2>
                                    <p>你有一条已读通知！</p>
                                    <p render-html="list.content"></p>
                                </div>
                                <div class="aui-flex">
                                    <div class="aui-flex-box unreadHref">查看详情</div>
                                    <div class="aui-layNews-arrow"></div>
                                </div>
                            </div>
                        </a>

                        <div class="aui-layNews-no">没有更多消息了</div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</section>

</body>
</html>
